{% extends 'front/index.html' %}

{% block content %}

<div class="mobiles">
    <div class="container">
        <div class="w3ls_mobiles_grids">
            <div class="col-md-4 w3ls_mobiles_grid_left">
                <div class="w3ls_mobiles_grid_left_grid">
                    <h3><b>User Center</b></h3>
                    <div class="w3ls_mobiles_grid_left_grid_sub">

                        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
							  <div class="panel panel-default">
								<div class="panel-heading" role="tab" id="headingOne">
								  <h4 class="panel-title asd">
									<a class="pa_italic" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span><i class="glyphicon glyphicon-minus" aria-hidden="true"></i><b>地址管理</b>
									</a>
								  </h4>
								</div>
								<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
								  <div class="panel-body panel_text">
									<ul>
										<li><a href="{% url 'user_address_add' %}">地址添加</a></li>
										<li><a href="{% url 'user_address' %}">地址修改</a></li>
									</ul>
								  </div>
								</div>
							  </div>

							</div>
                        <ul class="panel_bottom">
                            <li><a href="{% url 'user_info' %}"><b>个人信息管理</b></a></li>
                            <li><a href="{% url 'user_payinfo' %}"><b>订单管理</b></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-8 w3ls_mobiles_grid_right">

                <h3 align="left" style="margin-bottom: 50px"><b>个人信息</b></h3>

                <form action="/user_info/" class="form-horizontal" method="post" enctype="multipart/form-data">
                    <input class="hide" value="{{ user.id }}" name="id">
                    <div class="form-group">
                        <label class="col-md-2 control-label">上传头像：</label>
                        <div class="col-md-4">
                            <label>
                            <input type="file" class="hide" name="Profile" onchange="xmTanUploadImg(this)">
                            <img src="{{ user.user_profile }}" width="120" height="120" class="uploadImg"
                                 id="avarimgs"/>
                                </label>
                        </div>
                    </div>


                    <section>
                        <div class="portlet-body form" style="margin-top: 30px ;">
                                <div class="form-body">
                                    <input class="hide" value="{{ user.id }}" name="id">
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">会员名称：</label>
                                        <div class="col-md-4">
                                            <input type="text" class="form-control" name="name"
                                                   value="{{ user.username }}"
                                                   placeholder="会员名称..."/>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-md-2 control-label">登陆密码：</label>
                                        <div class="col-md-4">
                                            <input type="password" class="form-control" name="admin"
                                                   value="{{ user.password }}"
                                                   placeholder="会员密码..."/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">电子邮箱：</label>
                                        <div class="col-md-4">
                                            <input type="email" class="form-control" name="e-mail"
                                                   value="{{ user.email }}"
                                                   placeholder="电子邮件地址..."/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">手机号码：</label>
                                        <div class="col-md-4">
                                            <input type="tel" class="form-control" name="phone" value="{{ user.phone }}"
                                                   placeholder="手机号码..."/></div>
                                    </div>


                                    <div class="form-actions">
                                        <label class="col-md-2 control-label"></label>
                                        <div class="col-md-4">
                                            <button type="button" class="link_btn"
                                                    style="float: left;margin-right: 12px;margin-bottom:30px"
                                                    onclick="modify()">修改
                                            </button>
                                            <button type="submit" class="link_btn" style="float: left" onclick="myFunction()" >提交</button>
                                        </div>
                                    </div>
                                </div>

                        </div>

                    </section>

                 </form>
            </div>
        </div>

    </div>
</div>

<script>
function myFunction()
{
    alert("修改成功！");
}
</script>



<script type="text/javascript">
        jQuery(document).ready(function () {
            $("input").attr("disabled", "disabled");
            $("textarea").attr("disabled", "disabled");

            //对所有None的input赋空值
            $("input").each(function () {
                if ($(this).val() === "None") {
                    $(this).val("");
                }
            });




        });

        function modify() {
            $("input").removeAttr("disabled");
            $("textarea").removeAttr("disabled");
            $("#pictures").removeClass("hide")
        }
    </script>

    <script type="text/javascript">//上传头像实时变动浏览
    if (typeof FileReader == 'undefined') {
        document.getElementById("xmTanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";
        document.getElementById("xdaTanFileImg").setAttribute("disabled", "disabled");
    }

    //选择图片，马上预览
    function xmTanUploadImg(obj) {
        var file = obj.files[0];
        console.log(obj);
        console.log(file);
        console.log("file.size = " + file.size);
        var reader = new FileReader();
        reader.onloadstart = function (e) {
            console.log("开始读取....");
        }
        reader.onprogress = function (e) {
            console.log("正在读取中....");
        }
        reader.onabort = function (e) {
            console.log("中断读取....");
        }
        reader.onerror = function (e) {
            console.log("读取异常....");
        }
        reader.onload = function (e) {
            console.log("成功读取....");
            var img = document.getElementById("avarimgs");
            img.src = e.target.result;
            //或者 img.src = this.result;  //e.target == this
        }
        reader.readAsDataURL(file)
    }

    </script>
{% endblock %}